<template>
	<view>
		<view class="logo">
			<image src="../../static/logo.png"></image>
			<!-- <view>谷雨颐嘉健康服务平台</view> -->
		</view>
		<view class="input_lists">
			<view class="input_list">
				<input type="number" maxlength="11" v-model="formdata.phone" placeholder="请输入手机号" placeholder-style="font-size:26upx;color:#999999;" />
				<!-- <image src="../../static/clear.png"></image> -->
			</view>
			<view class="input_list">
				<input type="number" v-model="formdata.verify_code" placeholder="请输入验证码" placeholder-style="font-size:26upx;color:#999999;" />
				<view class="getverifycode" v-show="show" @tap="getVerifyCode()">获取验证码</view>
				<view class="getverifycode" v-show="!show">{{count}}s后获取</view>
			</view>
			<view class="input_list">
				<input type="password" v-model="formdata.password" placeholder="请输入密码" placeholder-style="font-size:26upx;color:#999999;" />
				<!-- <image src="../../static/clear.png"></image> -->
			</view>
			<view class="input_list">
				<input type="password" v-model="formdata.confirm_password" placeholder="请确认密码" placeholder-style="font-size:26upx;color:#999999;" />
				<!-- <image src="../../static/clear.png"></image> -->
			</view>
			<view class="input_list">
				<input type="text" v-model="formdata.invite_code" placeholder="请输入邀请码(选填)" placeholder-style="font-size:26upx;color:#999999;" />
				<!-- <image src="../../static/clear.png"></image> -->
			</view>
		</view>
		<view style="margin: 30rpx 0 0 75rpx;" class="register_checkbox">
			<checkbox  style="transform: scale(0.7);" :checked="checked" @click="change()"/><text>我已阅读并同意<text @tap="toagree" style="color: #35b528;">《服务协议》</text></text>
		</view>
		<view class="register">
			<view @click="to_register()">注册</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				checked: false,
				baseUrl:request.common.baseUrl,
				show: true,
				count: '',
				timer: null,
				formdata: {
					phone: '',
					invite_code:uni.getStorageSync('keyInvite_code'),
					store_id:uni.getStorageSync('keyStore_id'),
					password:'',
					confirm_password:'',
					verify_code:''
				},
			}
		},
		methods: {
			toagree() {
				uni.navigateTo({
					url: 'agreement'
				})
			},
			change() {
				this.checked = !this.checked
			},
			//获取验证码
			getVerifyCode() {
				let reg = /^1[0-9]{10}$/;
				if (!this.formdata.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon: 'none',
					})
					return false
				} else {
					if (!reg.test(this.formdata.phone)) {
						uni.showToast({
							title:'请输入正确的手机号',
							icon: 'none',
						})
						return false
					}
				}
				// 倒计时
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
				// 请求
				uni.request({
					url: request.common.baseUrl+'/api/login/sendSms',
					data: {
						phone:this.formdata.phone
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}
					}
				});
			},
			to_register(){
				let reg = /^1[0-9]{10}$/;
				if (!this.formdata.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon: 'none',
					})
					return false
				} else {
					if (!reg.test(this.formdata.phone)) {
						uni.showToast({
							title:'请输入正确的手机号',
							icon: 'none',
						})
						return false
					}
				}
				if (!this.formdata.verify_code) {
					uni.showToast({
						title:'请输入验证码',
						icon: 'none',
					})
					return false
				}
				// if (!this.formData.invite_code) {
				// 	this.$toast('请输入邀请码')
				// 	return false
				// }
				if (!this.formdata.password) {
					uni.showToast({
						title:'请输入密码',
						icon: 'none',
					})
					return false
				}
				if (!this.formdata.confirm_password) {
					uni.showToast({
						title:'请确认密码',
						icon: 'none',
					})
					return false
				}
				if (this.formdata.password !== this.formdata.confirm_password) {
					uni.showToast({
						title:'请输入相同的密码',
						icon: 'none',
					})
					return false
				}
				if(!this.checked) {
					uni.showToast({
						title:'请阅读服务协议并同意',
						icon: 'none',
					})
					return false
				}
				uni.request({
					url: request.common.baseUrl+'/api/login/wregister',
					data: {
						phone:this.formdata.phone,
						invite_code:this.formdata.invite_code,
						store_id:this.formdata.store_id,
						verify_code:this.formdata.verify_code,
						password:this.formdata.password,
						openid:uni.getStorageSync('keyOpenid'),
						nickname:uni.getStorageSync('keyNickname'),
						headimgurl:uni.getStorageSync('keyHeadimgurl'),
						sex:uni.getStorageSync('keySex'),
						city:uni.getStorageSync('keywCity')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.setStorageSync('keyToken',res.data.data.Token)
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000,
							})
							setTimeout(function () {
							    uni.reLaunch({
							    	url:"/pages/index/index"
							    })
							}, 2000);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}
					}
				});
			}
		}
	}
</script>
<style>
page{
	background-color: #ffffff;
}
.uni-checkbox-input{
		border-radius: 50%!important;
		color: #FFFFFF!important;
		border: 1px solid #e3e3e3!important;
	}
.uni-checkbox-input-checked {
	background-color: #35b528!important;
	border: 1px solid #e3e3e3!important;
}
.uni-radio-input-checked{
	background-color: #35b528!important;
	border: 1px solid #e3e3e3!important;
}
.logo{
	width:750upx;
	text-align:center;
}
.logo image{
	width:200upx;
	height:200upx;
	padding-top:100upx;
}
.logo view{
	font-size:32upx;
	color:#333333;
	margin-top:-10upx;
}
.input_lists{
	width:600upx;
	margin:100upx 75upx 15upx;
}
.input_list{
	width:600upx;
	height:100upx;
	position:relative;
}
.input_list input{
	width:600upx;
	height:100upx;
	font-size:32upx;
	color:#333333;
	float:left;
	border-bottom:1upx solid #f6f6f6;
}
.input_list image{
	width:20upx;
	height:20upx;
	float:right;
	position:absolute;
	margin-top:50upx;
	margin-left:-30upx;
}

.register{
	margin-top:80upx;
	text-align:center;
}
.register view{
	background-color:#52c41a;
	color:#FFFFFF;
	font-size:28upx;
	width:600upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}
.getverifycode{
	float:right;
	position:absolute;
	right:0;
	top:30upx;
	color:#52c41a;
}
</style>
